<template>
	<tm-fullView>
		<tm-menubars title="步骤条" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">基础示例</view>
			<tm-steps :lineWidth="10" model="number" color="bg-gradient-blue-accent-b" activeFontColor="blue" line-color="bg-gradient-blue-accent" v-model="active" :list="list"></tm-steps>
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">通过插槽改变不同步骤的图标</view>
			<tm-steps  model="icon" lineInIcon="icon-caret-right"  color="pink" active-icon="icon-angle-right" icon="icon-sync-alt" activeFontColor="pink" line-color="bg-gradient-pink-accent" v-model="active" :list="list">
				<template v-slot:icon="{data}">
					<block v-if="data.active&&data.index==2">
						<tm-icons :size="22" name="icon-times" color="yellow"></tm-icons>
					</block>
					<block v-if="!data.active">
						<tm-icons :size="22" :name="data.icon" color="grey"></tm-icons>
					</block>
					
					<block v-if="data.active&&data.index!=2">
						<tm-icons :size="22" :name="data.activeIcon" color="white"></tm-icons>
					</block>
				</template>
			</tm-steps>
			<tm-button @click="active+=1">下一步</tm-button>
			<tm-button text :shadow="0" @click="active-=1">上一步</tm-button>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">现在你可以点击步骤条来切换</view>
			<tm-steps  @click="iclick" model="icon" v-model="active1" :list="list2" rangeKey="text"></tm-steps>
			
		</tm-sheet>
					
		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmSteps from "@/tm-vuetify/components/tm-steps/tm-steps.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmSteps,tmIcons},
		data() {
			return {
				active:2,
				active1:0,
				list:['提交资料','审核资料','复核','成功提交'],
				list2:[
					{text:'步骤1'},
					{text:'步骤2'},
					{text:'步骤3'},
				],
			}
		},
		methods: {
			iclick(e){
				uni.$tm.toast(`你点击了${e}`)
				this.active1 = e;
			}
		}
	}
</script>

<style>

</style>
